<template>
  <div class="addPath">
    <header>
      <van-nav-bar :title="title" left-arrow @click-left="goback"></van-nav-bar>
    </header>
    <section>
      <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        save-button-text="保存地址"
        show-postal
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </section>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { areaList } from '@vant/area-data'
import http from '@/serveies/api/request'
export default {
  name: 'AddPath',
  data () {
    return {
      title: '编辑地址',
      areaList,
      searchResult: [],
      addressInfo: {
        addressDetail: '',
        areaCode: '',
        city: '',
        country: '',
        county: '',
        isDefault: false,
        name: '',
        postalCode: '',
        province: '',
        tel: ''
      },
      isStatus: false
    }
  },
  created () {
    const data = this.$route.query.data
    if (data) {
      this.title = '编辑地址'
      this.addressInfo = JSON.parse(data)
      this.aId = this.addressInfo.id
      this.isStatus = true
    }
    console.log(this.aId)
  },
  methods: {
    goback () {
      this.$router.back()
    },
    onSave (content) {
      // true 修改  false新增
      if (this.isStatus) {
        http
          .$axios({
            url: '/api/updateAddress',
            method: 'POST',
            data: {
              content,
              aId: this.aId
            },
            headers: {
              token: true
            }
          })
          .then((res) => {
            // 通知vuex
            Toast(res.msg)
            // 返回上一页
            this.$router.push('/path')
          })
      } else {
        http
          .$axios({
            url: '/api/addAddress',
            method: 'POST',
            data: {
              content
            },
            headers: {
              token: true
            }
          })
          .then((res) => {
            // 通知vuex
            Toast(res.msg)
            // 返回上一页
            this.$router.push('/path')
          })
      }
    },
    onDelete () {
      Toast('delete')
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }
        ]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addPath {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  ::v-deep .van-switch--on {
    background-color: #ff6700 !important;
  }
  ::v-deep .van-button--round {
    border-radius: 0 !important;
  }
  ::v-deep .van-button--danger {
    background-color: #ff6700 !important;
    border: 1px solid #ff6700 !important;
  }
  ::v-deep .van-button {
    height: 52px;
    line-height: 52px;
  }
  header {
    background-color: #eee;
    .van-nav-bar {
      background-color: #eee;
    }
    ::v-deep .van-nav-bar .van-icon {
      color: #333;
      font-size: 0.533333rem;
    }
  }
  section {
    ::v-deep .van-address-edit__buttons {
      position: fixed;
      left: 0;
      right: 0;
      bottom: -12px;
      color: #fff;
      text-align: center;
      font-size: 0.426667rem;
      padding: 0;
    }
  }
}
</style>
